<template>
  <div>
    <h1>{{ msg }}</h1>
    <el-divider></el-divider>
    <div id="main" style="width: 100%; height: 400px"></div>
  </div>
</template>
<script>
export default {
  name: "menuTest2",
  data() {
    return {
      msg: "开心记账本-统计",
    };
  },
  methods: {
    loadPieData() {
      this.$http.get("/account/getLineData",{}).then((res) => {
        // let list1=res.data.list1;
        let list2 = res.data.list2;
        let myChart = this.$echarts.init(document.getElementById("main"));
        let option = {
          title: {
            text: "近半年支出占比",
            left: "center",
          },
          tooltip: {
            trigger: "item",
          },
          legend: {
            orient: "vertical",
            left: "left",
          },
          series: [
            {
              name: "Access From",
              type: "pie",
              radius: "50%",
              data: list2,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        };
        option & myChart.setOption(option);
      });
    },
  },
  mounted() {
    this.loadPieData();
  },
};
</script>
